<template>
	<view class="content">
		<view class="item-box" v-for="(item,index) in courseData" :key="index">
			<view>
				<view>
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<view>
					<view>{{item.name}}</view>
					<view>{{item.datetime}}&nbsp{{item.coach}}</view>
					<view>{{item.restDatetime}}</view>
				</view>
				<view>
					<button type="default" size="mini">{{item.cancel}}</button>
					<button type="default" size="mini">{{item.signIn}}</button>
				</view>
			</view>
			<view></view>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs} from 'vue'
	export default{
		setup(){
			let data = reactive({
				courseData:[{
					imgUrl:'../../../static/logo.png',
					name:'快速减脂教程训练',
					datetime:'19:00-19:45',
					coach:'教练',
					restDatetime:'距离上课时间剩余',//距离上课时间剩余
					cancel:'评价',
					signIn:'已签到',
				},{
					imgUrl:'../../../static/logo.png',
					name:'快速减脂教程训练',
					datetime:'19:00-19:45',
					coach:'教练',
					restDatetime:'距离上课时间剩余',//距离上课时间剩余
					cancel:'评价',
					signIn:'已签到',
				},{
					imgUrl:'../../../static/logo.png',
					name:'快速减脂教程训练',
					datetime:'19:00-19:45',
					coach:'教练',
					restDatetime:'距离上课时间剩余',//距离上课时间剩余
					cancel:'评价',
					signIn:'已签到',
				},{
					imgUrl:'../../../static/logo.png',
					name:'快速减脂教程训练',
					datetime:'19:00-19:45',
					coach:'教练',
					restDatetime:'距离上课时间剩余',//距离上课时间剩余
					cancel:'评价',
					signIn:'已签到',
				},{
					imgUrl:'../../../static/logo.png',
					name:'快速减脂教程训练',
					datetime:'19:00-19:45',
					coach:'教练',
					restDatetime:'距离上课时间剩余',//距离上课时间剩余
					cancel:'评价',
					signIn:'已签到',
				}]
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 15rpx;
	}
	.item-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 200rpx;
		>view:nth-of-type(1){
			display: flex;
			justify-content: space-between;
			align-items: center;
			>view:nth-of-type(1){
				border-radius: 10px;
				overflow: hidden;
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			>view:nth-of-type(2) {
				flex-basis: 400rpx;
				>view:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: bold;
				}
				>view:nth-of-type(2) {
					font-size: 26rpx;
					margin: 15rpx 0;
				}
				>view:nth-of-type(3) {
					font-size: 30rpx;
					color: #FF0000;
				}
			}
			>view:nth-of-type(3) {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				button {
					padding: 3rpx 15rpx;
					color: #FFFFFF;
				}
				>button:nth-of-type(1){
					background-color: #FF0000;
				}
				>button:nth-of-type(2){
					background-color: #FFC000;
					margin-top: 15rpx;
				}
			}
		}
		
	}
</style>
